<template>
  <div class="login_container">
    <div class="login_box">
      <div class="rightimg"></div>
      <div class="leftcontent">
        <p>Login</p>
        <span class="span1" v-show="hintmsguser" ref="hint"
          >*用户名不能为空</span
        >
        <input
          type="text"
          placeholder="用户名"
          v-model.number="username"
          @blur="showhintmsguser"
          @focus="hiddenhintmsguser"
        />
        <br />
        <span class="span2" v-show="hintmsgpass">*密码不能为空</span>
        <input
          type="password"
          placeholder="密码"
          v-model="password"
          @blur="showhintmsgpass"
          @focus="hiddenhintmsgpass"
        /><br />
        <button class="btn1" @click="requiremsg">登录</button>
        <button class="btn2">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Login',
  data() {
    return {
      //登录表单的数据收集
      username: '',
      password: '',
      //账号密码提示信息
      hintmsguser: false,
      hintmsgpass: false,
    }
  },
  methods: {
    //失去焦点时判断用户名是否为空
    showhintmsguser() {
      // console.log("我是去焦点了");
      if (!this.username) {
        // console.log("用户名为空");
        this.hintmsguser = true

        return
      }
      // if (typeof this.username != "number") {
      //   this.hintmsguser = true;
      //   this.$refs.hint.innerHTML = "*输入格式不正确";
      // }
    },
    hiddenhintmsguser() {
      this.hintmsguser = false
    },
    showhintmsgpass() {
      if (!this.username) {
        this.hintmsgpass = true
        return
      }
    },
    hiddenhintmsgpass() {
      this.hintmsgpass = false
    },
    //
    // 登录按钮请求数据
    requiremsg() {
      axios
        .post('login', {
          username: this.username,
          password: this.password,
        })
        .then(
          (res) => {
            // console.log("我发送了请求");
            if (res.data.meta.status === 200) {
              console.log(res)
              this.$message.success('你好，登陆成功')
              //登陆成功后保存身份令牌到浏览器的sessionstorage中
              let data = res.data.data
              // console.log(data);
              // console.log(data.token);
              window.sessionStorage.setItem('token', data.token)
              //保存token 后登陆成功跳转路由页面
              this.$router.push('/home')
            }
          },
          (reason) => {
            this.$message.error('你好，登录失败')
            console.error(reason)
          }
        )
    },
  },
}
</script>

<style lang="less" scoped>
.login_container {
  width: 100%;
  height: 100%;

  // background-color: red;
  background-image: url(../assets/1629449018344288.jpg);
  //设置背景图片平铺方式
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .login_box {
    width: 550px;
    height: 400px;
    background-image: linear-gradient(
      to top right,
      lightsalmon,
      gray,
      lightsalmon
    );
    // background-color: lightsalmon;
    border-radius: 3px;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-100%, -50%);
    .rightimg {
      width: 220px;
      height: 400px;
      background-image: url(../assets/780.jpg);
      background-size: 100% 100%;
      float: left;
    }
    .leftcontent {
      width: 300px;
      height: 400px;
      box-sizing: border-box;
      float: right;
      // margin: 0 auto;
      text-align: center;
      span {
        color: red;

        margin-right: 115px;
      }
      .span1 {
        position: absolute;
        left: 290px;
        top: 95px;
      }
      p {
        text-align: center;
        font-size: 34px;
        // margin: 10px 0;
      }
      input {
        // margin: 0 auto;
        margin-top: 12px;
        height: 34px;
        width: 220px;
        border: none;
        border-bottom: 2px solid silver;
        outline: none;
        font-size: 20px;
        background-image: linear-gradient(
          to top right,
          lightsalmon,
          gray,
          lightsalmon
        );
      }
      button {
        margin: 0;
        margin-top: 25px;
        font-size: 20px;
        width: 78px;
        height: 42px;
        border: none;
        cursor: pointer;
        box-shadow: 0px 0px 5px orange;
      }
      .btn1 {
        position: absolute;
        left: 290px;
        background-image: linear-gradient(to top right, lightsalmon, gray);
      }
      .btn2 {
        position: absolute;
        right: 40px;
        background-image: linear-gradient(
          to top right,

          gray,
          lightsalmon
        );
      }
      button:active {
        box-shadow: 1px 1px 20px orange;
        transition: all 0.2s;
        transform: translate(2px, 2px);
      }
    }
  }
}
.addborder {
  border: 1px solid red;
}
</style>